<template>
  <BaseView id="deviceInfo">
    <template v-slot:header>
      <!-- 头部 -->
      <BaseHeader
        :title="$t('SittingHealth')"
        :rightIcon="null"
        @leftClick="$router.goBack()"
      />
    </template>
    <div class="card">
      <BaseCell
        :class="['oneset', { last: list.last }]"
        v-for="(item, index) in list"
        :key="index"
        :left="item.left"
        :desc="item.desc"
        :right="item.right"
        :arrow="item.arrow"
        :switch="item.switch"
        :border="item.border"
        :hide="item.hide"
        :disable="item.disable"
        @click="handleCellClick(item.id)"
      >
      </BaseCell>
    </div>
  </BaseView>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "DeviceInfo",
  computed: {
    list() {
      return [
        {
          // MAC地址/序列号
          id: 0,
          left:this.$t('translate9'),
          arrow: true,
        },
        {
          // 设备型号
          id: 1,
          left: this.$t('translate10'),
          arrow: true,
        },
        {
          // 版本信息
          id: 2,
          left: this.$t('translate11'),
          arrow: true,
        },
        {
          // 版本信息
          id: 3,
          left:this.$t('translate12'),
          arrow: true,
          border: false,
        },
      ];
    },
    ...mapState(["sn", "model", "fwv"]),
  },
  methods: {
    handleCellClick(id) {
      switch (id) {
        case 0: // 版本信息
          this.$router.push("versionInfo");
          break;
        case 1: // 版本信息
          this.$router.push("SetPosture");
          break;
        case 2: // 版本信息
          this.$router.push("Posture");
          break;
        case 3: // 版本信息
          this.$router.push("WaistPosture");
      }
    },
  },
  created() {
    window.hilink.setTitleVisible(false, "window.Ag.setTitleVisible");
    window.Ag.setTitleVisible = (res) => {};
    // 重置物理返回键
    window.goBack = () => {
      if (this.popupShow) {
        this.popupShow = 0;
        return;
      }
      this.$router.push("/");
    };
  },
};
</script>
<style lang="less" scoped>
@import url("../style/public.less");
@media only screen and (min-width: 800px) {
  #deviceInfo .card {
    width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem) !important;
    margin: 0rem auto 1.2rem !important;
  }
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
  #deviceInfo {
    .card {
      width: calc((100% - 10.8rem) / 8 * 6 + 5 * 1.2rem);
      margin: 0 auto !important;
    }
  }
  .bottom-btn {
    .btn {
      width: calc((100% - (9 * 1.2rem)) / 8 * 3) !important;
    }
  }
}
#deviceInfo {
  .card {
    align-self: stretch;
    .cardStyle();
    
    padding: 0.4rem 0;
    .switch {
      width: 4rem;
      height: 2rem;
      background-image: var(--ic_switch_off);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right center;
      &.on {
        background-image: var(--ic_switch_on);
      }
    }
  }
}
// 适配
.pad {
  #deviceInfo {
    .content {
      margin: 0 var(--pad_column_1);
    }
  }
}
</style>